<template>
  <div class="playlist-view" v-if="detail">
    <h2>{{ $route.params.id }}</h2>
    <SongListItem v-for="item in detail.tracks" :key="item.id" :item="item" />
  </div>
</template>

<script>
import { getPlayListDetail } from "../apis";

import SongListItem from "@/components/SongListItem.vue";
export default {
  components: {
    SongListItem,
  },
  data: function () {
    return {
      detail: null,
    };
  },
  created: async function () {
    // console.log(getPlayListDetail);
    // getPlayListDetail(this.$route.params.id).then((res) => {
    //   console.log(res.data.playlist);
    // });

    var res = await getPlayListDetail(this.$route.params.id);
    // console.log(res.data.playlist);
    this.detail = res.data.playlist;
  },
};
</script>

<style>
</style>